<template>
  <div class="person">
    <h5>一辆{{ car.brand }}车售价：{{ car.price }}</h5>
    <button @click="changePrice">修改价格</button>
    <br/>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改游戏名</button>
  </div>
</template>

<script lang="ts" setup name="Person1">
    import {ref} from 'vue';
    //数据
    let car= ref({
        brand:"奥迪",
        price:21.58
    })

    let games=ref([
      {id:"01",name:"游戏一"},
      {id:"02",name:"游戏二"},
      {id:"03",name:"游戏三"}
    ])

    //方法
    function changePrice(){
      console.log(car);
      car.value.price+=10
    }
    function changeFirstGame(){
      console.log(games);
      games.value[0].name="游戏一-改"
    }
</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>